<template>
  <a-drawer
    :visible="formVisible"
    :width="500"
    :title="isEdit ? '编辑' : '新增'"
    @ok="submit"
    @cancel="close"
  >
    <div>
      <a-form
        ref="formRef"
        :model="form"
        :rules="rules"
        :label-col-props="{ span: 8 }"
        :wrapper-col-props="{ span: 16 }"
      >
        <a-form-item field="avatarUrl" label="用户头像">
          <a-input v-model="form.avatarUrl" placeholder="请填写用户头像" />
        </a-form-item>
        <a-form-item field="content" label="评论内容">
          <a-input v-model="form.content" placeholder="请填写评论内容" />
        </a-form-item>
        <a-form-item field="createTime" label="创建时间">
          <a-input v-model="form.createTime" placeholder="请填写创建时间" />
        </a-form-item>
        <a-form-item field="goodsScore" label="商品评分">
          <a-input v-model="form.goodsScore" placeholder="请填写商品评分" />
        </a-form-item>
        <a-form-item field="id" label="">
          <a-input v-model="form.id" placeholder="请填写" />
        </a-form-item>
        <a-form-item field="logisticsScore" label="物流评分">
          <a-input v-model="form.logisticsScore" placeholder="请填写物流评分" />
        </a-form-item>
        <a-form-item field="nickName" label="用户昵称">
          <a-input v-model="form.nickName" placeholder="请填写用户昵称" />
        </a-form-item>
        <a-form-item field="orderId" label="订单ID">
          <a-input v-model="form.orderId" placeholder="请填写订单ID" />
        </a-form-item>
        <a-form-item field="orderItemId" label="订单详情ID">
          <a-input v-model="form.orderItemId" placeholder="请填写订单详情ID" />
        </a-form-item>
        <a-form-item field="picUrls" label="图片">
          <a-input v-model="form.picUrls" placeholder="请填写图片" />
        </a-form-item>
        <a-form-item field="replyTime" label="回复时间">
          <a-input v-model="form.replyTime" placeholder="请填写回复时间" />
        </a-form-item>
        <a-form-item field="sellerReply" label="卖家回复">
          <a-input v-model="form.sellerReply" placeholder="请填写卖家回复" />
        </a-form-item>
        <a-form-item field="serviceScore" label="服务评分">
          <a-input v-model="form.serviceScore" placeholder="请填写服务评分" />
        </a-form-item>
        <a-form-item field="skuId" label="sku_id">
          <a-input v-model="form.skuId" placeholder="请填写sku_id" />
        </a-form-item>
        <a-form-item field="specInfo" label="规格信息">
          <a-input v-model="form.specInfo" placeholder="请填写规格信息" />
        </a-form-item>
        <a-form-item field="spuId" label="商品Id">
          <a-input v-model="form.spuId" placeholder="请填写商品Id" />
        </a-form-item>
        <a-form-item field="updateTime" label="最后更新时间">
          <a-input v-model="form.updateTime" placeholder="请填写最后更新时间" />
        </a-form-item>
        <a-form-item field="userId" label="用户编号">
          <a-input v-model="form.userId" placeholder="请填写用户编号" />
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
  import { Message } from '@arco-design/web-vue';
  import { computed, ref } from 'vue';
  import { useRequest } from 'vue-request';
  import { useVisible } from '@/hooks/visible';
  import {
    addGoodsEvaluation,
    updateGoodsEvaluation,
  } from '@/api/mall/goodsevaluation';

  const formRef = ref();

  const initData = () => {
    return {
      avatarUrl: '',
      content: '',
      createTime: '',
      goodsScore: '',
      id: '',
      logisticsScore: '',
      nickName: '',
      orderId: '',
      orderItemId: '',
      picUrls: '',
      replyTime: '',
      sellerReply: '',
      serviceScore: '',
      skuId: '',
      specInfo: '',
      spuId: '',
      updateTime: '',
      userId: '',
    };
  };

  const rules = {
    createTime: [
      {
        required: true,
        message: '创建时间不能为空',
      },
    ],

    id: [
      {
        required: true,
        message: '不能为空',
      },
    ],

    updateTime: [
      {
        required: true,
        message: '最后更新时间不能为空',
      },
    ],
  };

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });

  const emit = defineEmits<{
    (e: 'update:visible', v: boolean): void;
    (e: 'refresh'): void;
  }>();

  const form = ref(props.formData);

  const { formVisible, close, open } = useVisible(props, emit);

  // 判断是编辑还是新增
  const isEdit = computed(() => !!form.value.id);

  const submit = async () => {
    formVisible.value = true;
    const validate = await formRef.value.validate();
    if (!validate) {
      if (isEdit.value) {
        await updateGoodsEvaluation(form.value).then(() => {
          Message.success('修改成功');
        });
      } else {
        await addGoodsEvaluation(form.value).then(() => {
          Message.success('添加成功');
        });
      }
      form.value = { ...initData };
      formVisible.value = false;
      emit('refresh');
    }
  };

  open(() => {
    const { id } = props.formData;
    if (id) {
      form.value = props.formData;
    } else {
      form.value = initData();
    }
  });
</script>
